<template>
	<div>
		<h1>订单列表页面</h1>
		<el-tabs v-model="searchObj.status" @tab-click="handleClick">
			<el-tab-pane :label="item.name+'('+item.num+')'" v-for="item in $store.state.order.ordersStatic"
				:name="item.name" :key="item.name"></el-tab-pane>
		</el-tabs>
		<p>
			<!-- {{searchObj}} -->
		</p>
		<el-table :data="orderList" border style="width: 100%">
			<el-table-column prop="OrderNum" label="订单编号">
			</el-table-column>
			<el-table-column prop="createAt" label="下单时间">
			</el-table-column>
			<el-table-column prop="customerId" label="会员账号">
			</el-table-column>
			<el-table-column prop="total_amount" label="订单总额">
			</el-table-column>
			<el-table-column prop="shoppingAdd" label="所属门店">
			</el-table-column>
			<el-table-column prop="status" label="订单状态" width="120">
			</el-table-column>
			<el-table-column>
				<template>
					<el-button type="text" size="small">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination layout="prev, pager, next" :total="pagnation.total" @current-change="handleCurrentChange"
			:current-page.sync="currentPage">
		</el-pagination>
	</div>
</template>

<script>
	// 导入订单请求数据的接口
	import {
		GetOrderList
	} from '@/api/order.js'
	export default {
		methods: {
			// 单击顶部tab栏重新获取订单信息
			handleClick(tab, event) {
				console.log(tab, event);
				this.getOrderList();
			},
			// 获取订单信息的方法
			getOrderList() {
				// 修正el的bug
				if (this.searchObj.status == 0 || this.searchObj.status == "全部") {
					this.searchObj.status = "";
				}
				GetOrderList(this.searchObj)
					.then(res => {
						console.log("订单列表信息", res.data)
						this.orderList = res.data.data;
						this.pagnation = res.data.pagnation;
					})
					.catch(err => {
						console.log("获取订单信息失败", err)
					})
			},
			handleCurrentChange() {
				this.searchObj.current = this.currentPage
				this.getOrderList()
			}
		},
		data() {
			return {
				// 定义搜索条件
				searchObj: {
					status: "",
					current: 1
				},
				// 订单列表
				orderList: [],
				// 分页信息
				pagnation: {},
				currentPage: 1,
			}
		},
		created() {
			// 获取订单列表
			this.$store.dispatch("getOrdersStatic");
		},
		mounted() {
			this.getOrderList();
		}
	}
</script>

<style>
</style>
